<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付示例页</title>
    <style>
        #app{
            padding: 5%;
            border: 1px solid red;
        }
        #app>div{
            margin-top: 20px;
        }

        #type_list_div>div{
            padding: 5px 0;
            cursor: pointer;
        }

        #alipay_btn{
            display: inline-block;
            font-size: 16px;
            padding: 10px;
            color: #ffffff;
            background-color: #00a0e9;
            margin-bottom: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div id="app">

    <div>
        <div>支付金额</div>
        <div><input type="text" name="money" placeholder="支付金额" onkeyup="fnSetMoney(this)" value="0.01"></div>
    </div>
    <div>
        <div>支付方式</div>
        <div id="type_list_div">
            <div onclick="fnSetType(this)">支付宝【web电脑支付】<input channel="alipay" type="radio" name="type" value="web" checked></div>
            <div onclick="fnSetType(this)">支付宝【wap手机网站支付】<input channel="alipay" type="radio" name="type" value="wap"></div>
            <div onclick="fnSetType(this)">支付宝【app支付】<input channel="alipay" type="radio" name="type" value="app"></div>
            <div onclick="fnSetType(this)">微信【扫码支付】<input channel="wechat_pay" type="radio" name="type" value="scan"></div>
            <div onclick="fnSetType(this)">微信【公众号支付】<input channel="wechat_pay" type="radio" name="type" value="mp"></div>
        </div>
    </div>

    <div>
        <div id="alipay_btn" onclick="fnJumpToPay()">支付金额：<span id="money_span">0.01</span></div>
        <div>已选的支付方式： <span id="type_span"></span></div>
    </div>

</div>




</body>

<script src="/h5/js/jquery-3.5.1.min.js"></script>

<script>

    $(function () {

    })

    // 判断是否是微信内置浏览器
    function is_weixn(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
        } else {
            return false;
        }
    }

    function fnSetType(obj){
        $('input[name="type"]').attr('checked', false)
        $(obj).children('input').attr('checked', true)
        $('#type_span').text($('input[name="type"]:checked').val())
    }

    function fnSetMoney(obj){
        $('#money_span').text($(obj).val())
    }

    function fnJumpToPay(){
        var money = $('input[name="money"]').val();
        var type_obj = $('input[name="type"]:checked');
        var type = $(type_obj).val();
        var channel = $(type_obj).attr('channel');
        if (channel == 'alipay') {
            var url = '/payment/1/alipay?type=' + type + '&money=' + money;
            console.log(url)
            window.open(url)
        } else if (channel == 'wechat_pay') {

            if (type == 'scan') {
                var url = '/payment/1/wechat?type=' + type + '&money=' + money;
                console.log(url)
                window.open(url)
            }
            else if (type == 'mp') {
                if (!is_weixn()) {
                    alert('不是微信浏览器，不能使用微信公众号支付');
                    return false;
                }

                // 先拿openid
                fnGetWechatUser(function (openid) {
                    var url = '/payment/1/wechat?type=' + type + '&money=' + money + '&openid=' + openid;
                    $.ajax({
                        url: url,
                        success(res) {

                            alert('payment/1/wechat: ' + JSON.stringify(res))

                            WeixinJSBridge.invoke('getBrandWCPayRequest', res, function(res) {
                                alert(res.err_msg)
                                if (res.err_msg == "get_brand_wcpay_request:ok") {
                                    // 使用以上方式判断前端返回,微信团队郑重提示：
                                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                    alert('支付成功')
                                }
                            });

                        }
                    })
                });
            }

        }

    }

    function fnGetWechatUser(callback) {
        $.ajax({
            url: '/wechat/user',
            success(res) {
                alert('wechat/user: ' + JSON.stringify(res))
                callback(res.id)
                return;
            }
        })
    }

</script>

</html>
